<template>
  <div class="box-container">
    <div class="leftBox">
      <div class="search">
        <el-input v-model="className" clearable placeholder="输入类别名称搜索" @input="classNameInput" />
      </div>
      <div class="numberClass">
        <numberClassBtn v-for="item in numberClassList" :key="item.id" :item="item" @clickClass="clickClass(item)" @contextmenu="contextmenu(item)" />
      </div>
    </div>
    <div class="rightBox">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ configProjectName }}</span>
          <span v-if="configProjectName === '当前选中全部'" class="title-hint">确定修改后应用所有类别！</span>
        </div>
        <div class="configBox">
          <el-switch
            v-model="switchValue"
            active-color="#ff4949"
            inactive-color="#13ce66"
            active-text="即时删除"
            inactive-text="进入使用中"
          />
          <div><el-button type="primary" round @click="updClassConfig">确定修改</el-button></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import numberClassBtn from '@/views/GetNumberBusiness/numberList/components/numberClassBtn.vue'
import { antiShake } from '@/utils'
import { apiGetNumberClass, apiUpdateNumberClass } from '@/api/GetNumberBusiness'

export default {
  components: {
    numberClassBtn
  },
  data() {
    return {
      rightclickInfo: {},
      configProjectName: '当前选中全部',
      activeName: '1',
      switchValue: false,
      className: '', // 类别名查询条件
      numClass: '',
      numberClassList: [],
      param: {},
      userInfo: this.$ls.get('USER_INFO') || {}
    }
  },
  watch: {
    switchValue: {
      handler(v) {
        this.param.isGetDele = v ? '1' : '0'
      }
    }
  },
  created() {
    this.getClassList()
  },
  mounted() {},
  methods: {
    // 修改类别配置
    updClassConfig() {
      if (this.configProjectName === '当前选中全部') {
        this.param.id = 'all'
        this.updateNumberClass()
      } else {
        this.updateNumberClass()
      }
    },
    // 点击类别
    clickClass(item) {
      console.log('item', item)
      this.param.id = item.id
      this.configProjectName = `当前选中${item.className}`
      this.selectNode(item)
      this.switchValue = item.isGetDele === '1'
    },
    // 修改类别
    updateNumberClass() {
      this.$store.dispatch('app/setLoading', true)
      apiUpdateNumberClass(this.param).then(res => {
        console.log('账号类别列表', res)
        if (res.code === 1) {
          this.getClassList()
          this.$message.success(res.message || '操作成功')
        } else {
          this.$message.warning(res.message || '操作失败')
        }
      }).catch((res) => {
        this.$message.error(res.message || '操作失败')
      }).finally(res => {
        this.$store.dispatch('app/setLoading', false)
      })
    },
    // 选中某个节点 其他节点取消选中状态
    selectNode(item) {
      this.numClass = item.className
      // this.$refs.numberList.UserNum = item.UserNum
      this.numberClassList.forEach(v => {
        v.active = v.id === item.id
      })
    },
    // 类别搜索值更新
    classNameInput(e) {
      antiShake(() => {
        this.getClassList(e)
      }, 600)
    },
    // 账号类别列表
    getClassList(className = '') {
      const p = {
        UserNum: this.userInfo.loginNum,
        className
      }
      this.$store.dispatch('app/setLoading', true)
      apiGetNumberClass(p).then(res => {
        console.log('账号类别列表', res)
        if (res.code === 1) {
          this.numberClassList = res.data.list.map(v => {
            v.active = false
            return v
          })
          this.numberClassList.unshift({
            className: '全部',
            id: 0,
            active: true
          })
        } else {
          this.$message.warning(res.message)
        }
      }).catch((res) => {
        this.$message.error(res.message)
      }).finally(res => {
        this.$store.dispatch('app/setLoading', false)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box-container{
  display: flex;
  background-color: #fff;
  .leftBox{
    width: 20%;
    .search{
      margin: 20px;
    }
    .numberClass{
      overflow-y: auto;
      height: 730px;
      padding-right: 16px;
      border-right: 1px #dfe6ec solid;
    }
  }
  .rightBox{
    width: 80%;
    .box-card{
      margin: 20px;
      .title-hint{
        margin-left: 20px;
        color: red;
        font-size: 14px;
      }
    }
    .configBox{
      padding: 24px;
      background-color: #fff;
      div:nth-child(2){
        margin-top: 20px;
      }
    }
  }
}

/*滚动轨道样式*/
::-webkit-scrollbar-track {
	background: #c1c1c1;
	border-radius: 4px;
}
/*滚动条*/
::-webkit-scrollbar-thumb {
	background: #1890ff;
	border-radius: 10px;
}
::-webkit-scrollbar {
    width:6px;
}

// 类别操作按钮
.css-button-3d--sky {
  width: 78px;
  height: 32px;
  color: #fff;
  // padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  background: #80ed99;
  box-shadow: 0 5px #57cc99;
}
.css-button-3d--sky:hover {
  box-shadow: 0 3px #57cc99;
  top: 1px;
}
.css-button-3d--sky:active {
  box-shadow: 0 0 #57cc99;
  top: 5px;
}
.el-icon-plus{
  margin-right: 6px;
  // position: absolute;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);
}
.adminHint{
  color: red;
  font-size: 14px;
}
</style>

